<template>
  <van-swipe class="my-swipe"
             :autoplay="3000"
             indicator-color="white">
    <van-swipe-item v-for="item of pages">
      <div class="box">
        <div class="box-item" v-for="i of item">
          <img :src="i.imgUrl" alt="">
          <div>{{i.desc}}</div>
        </div>
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
export default {
name: "icon",
  props:{
  iconlist:{
    type:Array,
    default:[]
  }
  },
  data(){
  return{
  }
  },
  computed:{
    pages(){
      let page = []
      this.iconlist.forEach((item,index)=>{
        let i = Math.floor(index / 8)
        if (!page[i]){
          page[i] = []
        }
        page[i].push(item)
      })
      return page
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2,1fr);
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
.box-item{

}
.box-item img{
  width: 100%;
}
</style>
